<template>
  <layout>
    <uv-sticky bg-color="#F5F5F5" offset-top="0" customNavHeight="0">
      <uv-navbar
        :fixed="false"
        :safeAreaInsetTop="true"
        height="0"
        bgColor="transparent"
        leftIcon=""
      />
      <!-- #ifndef MP -->
      <!--  <blank size="10"></blank> -->
      <!-- #endif -->
    </uv-sticky>

    <view class="container">
      <view class="banner">
        <uv-swiper
          class="bg"
          height="330"
          imgMode="aspectFill"
          keyName="image"
          :list="listAds"
          indicatorMode="dot"
          indicatorStyle="bottom"
        ></uv-swiper>
        <view class="intro">
          <view class="greet"
            >{{ currentLanguageTexts.hello }}，{{
              isLogin ? member.nickname : currentLanguageTexts.visitor
            }}</view
          >
          <view class="note"
            >{{ currentLanguageTexts.welcomeToUse }}XX在线点餐系统</view
          >
        </view>
        <view class="language" @click="languagePickerRef.open()">
          <text>{{ currentLanguage.label }}</text>
        </view>
      </view>
      <view class="content">
        <view class="p-2 content-user">
          <view class="flex justify-between align-center">
            <view v-if="isLogin" class="flex align-center">
              <image
                :src="
                  member.avatar
                    ? member.avatar
                    : '/static/images/mine/default.png'
                "
                class="rounded-circle"
                style="width: 50rpx; height: 50rpx"
              ></image>
              <view class="content-user-text ml-1">{{ member.nickname }}</view>
            </view>
            <view v-else class="flex align-center">
              <image
                src="/static/images/mine/default.png"
                class="rounded-circle mr-1"
                style="width: 50rpx; height: 50rpx"
              ></image>
              <view>
                <view class="content-user-text font-weight-bolder">{{
                  currentLanguageTexts.dearCustomer
                }}</view>
                <view class="size-sm">{{
                  currentLanguageTexts.authorizedLogin
                }}</view>
              </view>
            </view>
            <view v-if="isLogin" class="py-1 px-2 content-user-login">
              {{
                member.cardId > 0
                  ? member.cardName
                  : currentLanguageTexts.ordinaryMember
              }}
            </view>
            <view
              v-else
              class="bg-white py-1 px-2 content-user-login"
              @tap="login"
              >{{ currentLanguageTexts.login }}/{{
                currentLanguageTexts.register
              }}</view
            >
          </view>
          <view class="mt-3"><uv-line></uv-line></view>
          <view class="pb-3 pt-5">
            <uv-row>
              <uv-col span="2">
                <view class="flex justify-center">
                  <image
                    src="/static/images/003.png"
                    style="width: 50rpx; height: 50rpx"
                  ></image>
                </view>
              </uv-col>
              <uv-col span="2">
                <view class="flex flex-column font-size-sm text-color-assist">
                  <view class="text-center">{{
                    currentLanguageTexts.balance
                  }}</view>
                  <view class="text-center text-dark">{{
                    isLogin ? member.nowMoney : '--'
                  }}</view>
                </view>
              </uv-col>
              <uv-col span="2">
                <view class="flex justify-center">
                  <image
                    src="/static/images/002.png"
                    style="width: 50rpx; height: 50rpx"
                  ></image>
                </view>
              </uv-col>
              <uv-col span="2">
                <view class="flex flex-column font-size-sm text-color-assist">
                  <view class="text-center">{{
                    currentLanguageTexts.points
                  }}</view>
                  <view class="text-center text-dark">{{
                    isLogin ? member.integral : '--'
                  }}</view>
                </view>
              </uv-col>
              <uv-col span="2">
                <view class="flex justify-center">
                  <image
                    src="/static/images/001.png"
                    style="width: 50rpx; height: 50rpx"
                  ></image>
                </view>
              </uv-col>
              <uv-col span="2">
                <view class="flex flex-column font-size-sm text-color-assist">
                  <view class="text-center">{{
                    currentLanguageTexts.coupon
                  }}</view>
                  <view class="text-center text-dark">{{
                    isLogin ? member.couponCount : '--'
                  }}</view>
                </view>
              </uv-col>
            </uv-row>
          </view>
        </view>
        <view class="flex justify-between yshop-menu">
          <view
            class="flex flex-column align-center yshop-menu-item"
            @tap="takein"
          >
            <view>
              <image
                src="/static/images/index002.png"
                mode="aspectFit"
                class="img-01"
              ></image>
            </view>
            <view>{{ currentLanguageTexts.takein }}</view>
            <view class="font-small text-light-black">{{
              currentLanguageTexts.orderMian
            }}</view>
          </view>
          <view
            class="flex flex-column align-center yshop-menu-item"
            @tap="takeout"
          >
            <view
              ><image
                src="/static/images/index003.png"
                mode="aspectFit"
                class="img-01"
              ></image
            ></view>
            <view>{{ currentLanguageTexts.takeout }}</view>
            <view class="font-small text-light-black">{{
              currentLanguageTexts.toHome
            }}</view>
          </view>
        </view>
        <view class="flex justify-between" style="margin-bottom: 10rpx">
          <view
            class="flex flex-column align-center yshop-menu-item"
            @tap="invite"
          >
            <view
              ><image
                src="/static/images/yuyue.png"
                mode="aspectFit"
                class="img-01"
              ></image
            ></view>
            <view>{{ currentLanguageTexts.due }}</view>
            <view class="font-small text-light-black text-center">{{
              currentLanguageTexts.advanceReservation
            }}</view>
          </view>
          <view
            class="flex flex-column align-center yshop-menu-item"
            @tap="goScan"
          >
            <view
              ><image
                src="/static/images/saoma.png"
                mode="aspectFit"
                class="img-01"
              ></image
            ></view>
            <view>{{ currentLanguageTexts.scanCodeToOrder }}</view>
            <view class="font-small text-light-black text-center">{{
              currentLanguageTexts.scanCodeByWechat
            }}</view>
          </view>
        </view>
        <view class="info">
          <view class="integral_section" @tap="selectShop">
            <view class="top">
              <text class="title">{{ currentLanguageTexts.viewStores }}</text>
            </view>
            <view class="bottom">
              {{ currentLanguageTexts.discoverOnlineStores }}
            </view>
          </view>
          <view class="qrcode_section" @tap="selectShop">
            <image src="/static/images/store.png"></image>
            <text>{{ currentLanguageTexts.lookFor }}</text>
          </view>
        </view>
        <view class="info">
          <view class="integral_section" @tap="goScore">
            <view class="top">
              <text class="title">{{ currentLanguageTexts.pointsMall }}</text>
            </view>
            <view class="bottom">
              {{ currentLanguageTexts.redeemCoupons }}
            </view>
          </view>
          <view class="qrcode_section" @tap="goScore">
            <image src="/static/images/jifen.png"></image>
            <text>{{ currentLanguageTexts.takeAStroll }}</text>
          </view>
        </view>
        <view class="member-news">
          <view class="header">
            <view class="title">{{
              currentLanguageTexts.eventGrabProphet
            }}</view>
          </view>
          <view class="list">
            <view
              class="item"
              v-for="(item, index) in listNews"
              :key="index"
              @tap="goNews(item.id)"
            >
              <image :src="item.picUrl"></image>
              <view class="title">{{ item.title }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <languagePicker ref="languagePickerRef" />
  </layout>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { menuAds, getNews } from '@/api/market';
import { getWechatConfig, DoGetRateAndCurrencySymbolApi } from '@/api/order';
import { storeToRefs } from 'pinia';
import { useMainStore } from '@/store/store';
import languagePicker from '@/pages/components/languagePicker/index.vue';

const main = useMainStore();
const { member, store, isLogin, currentLanguage, currentLanguageTexts } =
  storeToRefs(main);
//const store = ref(main.store)
const listAds = ref([]);
const listNews = ref([]);
const languagePickerRef = ref();
// const isLogin = ref(main.isLogin)

const getRate = async () => {
  const res = await DoGetRateAndCurrencySymbolApi({});
  main.rate = res.rate;
  main.currencySymbol = res.symbol;
  main.isAtFront = res.symbol_at_front;
};

const handGetListAds = async () => {
  let shop_id = store.id ? store.id : 0;
  let data = await menuAds({
    shop_id: shop_id,
  });

  if (data) {
    listAds.value = data.list.map((el) => el.image.trim());

    uni.setStorage({
      key: 'isActive',
      data: data.isActive,
    });
    if (data.list.length > 0) {
      uni.setStorage({
        key: 'shopAd',
        data: data.list[0].image,
      });
    }
  }
};

const getNewsList = async () => {
  let data = await getNews({});
  //console.log('listNews:',data)
  if (data) {
    listNews.value = data;
  }
};

const takein = () => {
  main.SET_ORDER_TYPE('takein');
  main.DEL_DESK();
  uni.switchTab({
    url: '/pages/menu/menu',
  });
};

const takeout = () => {
  main.SET_ORDER_TYPE('takeout');
  main.DEL_DESK();
  uni.switchTab({
    url: '/pages/menu/menu',
  });
};

const selectShop = () => {
  uni.navigateTo({
    url: '/pages/components/pages/shop/shop',
  });
};

const goNews = (id) => {
  uni.navigateTo({
    url: '/pages/components/pages/mine/news?id=' + id,
  });
};

const coupons = () => {
  if (!main.isLogin) {
    uni.navigateTo({ url: '/pages/components/pages/login/login' });
    return;
  }
  uni.navigateTo({
    url: '/pages/components/pages/coupons/coupons?current=4',
  });
};

const goScore = () => {
  uni.navigateTo({
    url: '/pages/components/pages/scoreproduct/list',
  });
};

const getNewPath = (path) => {
  const tempPath = decodeURIComponent(path);
  const strList = tempPath.split('?scene=');
  const scene = encodeURIComponent(strList[1]);
  const newPath = strList[0] + '?scene=' + scene;

  return newPath;
};

const goScan = async () => {
  // #ifdef  MP-WEIXIN
  uni.scanCode({
    success: function (res) {
      const newPath = getNewPath(res.path);
      uni.navigateTo({
        url: '/' + newPath,
      });
    },
    fail: function (res) {
      console.log('扫码失败：', res);
    },
  });
  // #endif

  // #ifdef  H5
  uni.navigateTo({
    url: '/pages/components/pages/scan/operate',
  });
  // let config = await getWechatConfig();
  // jweixin.config({
  //   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  //   appId: config.appId, // 必填，公众号的唯一标识
  //   timestamp: config.timestamp, // 必填，生成签名的时间戳
  //   nonceStr: config.nonceStr, // 必填，生成签名的随机串
  //   signature: config.signature, // 必填，签名
  //   jsApiList: ['scanQRCode'],
  // });
  // jweixin.ready(function () {
  //   jweixin.scanQRCode({
  //     needResult: 1,
  //     success: function (res) {
  //       //alert(res.resultStr)
  //       console.log('sanc:', res);
  //       location.href = res.resultStr;
  //     },
  //   });
  // });

  // #endif
};

const invite = () => {
  // uni.showToast({
  // 	title: '开发中......',
  // 	icon: 'error'
  // })
  uni.navigateTo({
    url: '/pages/components/pages/shop/shop?type=2',
  });
};

const login = () => {
  uni.navigateTo({
    url: '/pages/components/pages/login/login',
  });
};

onLoad(async () => {
  // main.init()
  await getRate();
  handGetListAds();
  getNewsList();
  uni.setTabBarItem({
    index: 0,
    text: currentLanguageTexts.value.homePage,
  });
  uni.setTabBarItem({
    index: 1,
    text: currentLanguageTexts.value.orderingMeal,
  });
  uni.setTabBarItem({
    index: 2,
    text: currentLanguageTexts.value.menuOrder,
  });
  uni.setTabBarItem({
    index: 3,
    text: currentLanguageTexts.value.mine,
  });
});
</script>

<style lang="scss" scoped>
.size-sm {
  font-size: 20rpx;
  color: #282828;
}
.index-img {
  width: 120px;
  height: 120rpx;
  position: relative;
  left: -20rpx;
}
.img-01 {
  width: 100px;
  height: 100rpx;
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .iconfont {
    font-size: 60rpx;
    color: $color-primary;
  }
}
.img-02 {
  width: 110px;
  height: 110rpx;
  margin-top: 20rpx;
}

/* #ifdef H5 */
page {
  height: auto;
  min-height: 100%;
}
/* #endif */
page {
  //background-color: #ffffff!important;
}
.banner {
  position: relative;
  width: 100%;
  //height: 300rpx;

  .bg {
    width: 100%;
    height: 330rpx;
  }

  .intro {
    position: absolute;
    top: calc(50rpx + var(--status-bar-height));
    left: 40rpx;
    color: #ffffff;
    display: flex;
    flex-direction: column;

    .greet {
      font-size: $font-size-lg;
      margin-bottom: 10rpx;
    }

    .note {
      font-size: $font-size-sm;
    }
  }
  .language {
    position: absolute;
    top: calc(50rpx + var(--status-bar-height));
    right: 40rpx;
    display: flex;
    align-items: center;
    background: rgba($color: #fff, $alpha: 0.2);
    padding: 10rpx 16rpx;
    border-radius: 8rpx;
    gap: 10rpx;
    color: #282828;
    font-size: 24rpx;
    image {
      width: 48rpx;
      height: 34rpx;
      border-radius: 4rpx;
    }
  }
}

.content {
  padding: 0 20rpx;
}
.content-user {
  background-color: #ffffff;
  position: relative;
  top: -56rpx;
}
.content-user-text {
  font-size: 24rpx;
  color: #282828;
}
.content-user-login {
  color: rgb(90, 91, 92);
  border-radius: 40rpx;
  font-size: 22rpx;
  border: solid $color-primary;
  background-color: $color-primary;
}

.info {
  position: relative;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  background-color: #ffffff;
  box-shadow: $box-shadow;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  .integral_section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .top {
      display: flex;
      align-items: center;

      .title {
        color: $text-color-base;
        font-size: $font-size-base;
        margin-right: 10rpx;
      }
      .value {
        font-size: 44rpx;
        font-weight: bold;
      }
    }

    .bottom {
      font-size: $font-size-sm;
      color: $text-color-assist;
      display: flex;
      align-items: center;
    }
  }

  .qrcode_section {
    color: $text-color-black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: $font-size-sm;

    image {
      width: 70rpx;
      height: 70rpx;
      // margin-bottom: 10rpx;
    }
  }
}

.yshop-menu {
  margin-bottom: 10rpx;
  position: relative;
  margin-top: -42rpx;
}
.yshop-menu-item {
  background-color: #ffffff;
  width: 350rpx;
  padding-bottom: 30rpx;
}

.member-news {
  width: 100%;
  margin-bottom: 30rpx;
  background-color: #ffffff;
  padding: 0 20rpx 30rpx 30rpx;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;

    .title {
      font-size: $font-size-lg;
      font-weight: bold;
    }

    .iconfont {
      font-size: 52rpx;
      color: $text-color-assist;
    }
  }

  .list {
    width: 100%;
    display: flex;
    flex-direction: column;

    .item {
      width: 100%;
      height: 240rpx;
      position: relative;
      margin-bottom: 10rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }

      .title {
        position: relative;
        font-size: 32rpx;
        font-weight: 500;
        width: 100%;
        top: -70rpx;
        left: 16rpx;
        color: #ffffff;
      }
    }
  }
}
</style>
